<template>
  <div class="app-container calendar-list-container">
    <div class="apply-query">
      <el-row class="filter-query">
        <el-col><span>查询条件</span></el-col>
      </el-row>

      <el-form :inline="true" style="padding: 10px 20px 0">
        <el-row style="padding-bottom: 10px">
          <el-col :span="4">
            <div style="margin-right: 40px">
              <div class="labelName">员编</div>
              <el-input @keyup.enter.native="handleFilter" class="filter-item" v-model="listQuery.username" clearable>
              </el-input>
            </div>
          </el-col>
          <el-col :span="4">
            <div style="margin-right: 40px">
              <div class="labelName">姓名</div>
              <el-input @keyup.enter.native="handleFilter" class="filter-item"
                        v-model="listQuery.name" clearable>
              </el-input>
            </div>
          </el-col>
          <el-col :span="4">
          <div style="margin-right: 40px">
            <div class="labelName">所属BU</div>
            <el-select v-model="listQuery.groupType" :clearable="true"
                       @keyup.enter.native="handleFilter">
              <el-option v-for="item in groupTypeList"
                         :key="item.value" :label="item.label"
                         :value="item.value">
                <span>{{ item.label }}</span>
              </el-option>
            </el-select>
          </div>
        </el-col>
          <el-col :span="4">
            <div style="margin-right: 40px">
              <div class="labelName">系统角色</div>
              <el-select v-model="listQuery.groupType" :clearable="true"
                         @keyup.enter.native="handleFilter">
                <el-option v-for="item in groupTypeList"
                           :key="item.value" :label="item.label"
                           :value="item.value">
                  <span>{{ item.label }}</span>
                </el-option>
              </el-select>
            </div>
          </el-col>
          <el-col :span="4">
            <div style="margin-right: 40px">
              <div class="labelName">直属主管</div>
              <el-select v-model="listQuery.groupType" :clearable="true"
                         @keyup.enter.native="handleFilter">
                <el-option v-for="item in groupTypeList"
                           :key="item.value" :label="item.label"
                           :value="item.value">
                  <span>{{ item.label }}</span>
                </el-option>
              </el-select>
            </div>
          </el-col>
          <el-col :span="4">
            <div style="margin-right: 40px">
              <div class="labelName">上级主管</div>
              <el-select v-model="listQuery.groupType" :clearable="true"
                         @keyup.enter.native="handleFilter">
                <el-option v-for="item in groupTypeList"
                           :key="item.value" :label="item.label"
                           :value="item.value">
                  <span>{{ item.label }}</span>
                </el-option>
              </el-select>
            </div>
          </el-col>
          <el-col style="margin-top: 36px;text-align: center">
            <el-button class="yt-btn-ys" type="primary" icon="search" @click="handleFilter" >搜索</el-button>
            <el-button class="yt-btn" type="primary" @click="reset">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <div class="data-list">
      <div class="list-content">
        <span>数据列表</span>
      </div>

      <el-table :key='tableKey' :data="list" v-loading.body="listLoading" style="margin-top: 20px" class="yt-table" border fit highlight-current-row>
        <el-table-column align="center" label="员编" prop="username"/>
        <el-table-column align="center" label="角色" prop="groupType" :formatter="formatter.groupTypeFormatter" />
        <el-table-column align="center" label="姓名"  prop="name"/>
        <el-table-column align="center" label="英文名"prop="ename"/>
        <el-table-column align="center" label="BG"/>
        <el-table-column align="center" label="ERP BU No."  width="110"/>
        <el-table-column align="center" label="ERP BU Name"  width="120" />
        <el-table-column align="center" label="成本中心（HRM）" width="140"/>
        <el-table-column align="center" label="成本中心"/>
        <el-table-column align="center" label="直属主管"/>
        <el-table-column align="center" label="上级主管"/>
        <el-table-column align="center" label="手机号码"/>
      </el-table>

      <div v-show="!listLoading" class="pagination-container">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                       :current-page.sync="listQuery.page"
                       :page-sizes="[10, 20, 30, 50, 100, 200]" :page-size="listQuery.limit"
                       layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
    </div>

  </div>
</template>

<script>
  import {
    page
  } from '@/api/admin/user/index';

  import formatter from '@/utils/formatter'
  import { getTypeValue } from '@/api/dict/dictValue/index';
  import { mapGetters } from 'vuex';
  import { getToken } from '@/utils/auth'

  export default {
    name: 'userManage',
    data() {
      return {
        formatter,
        flag: true,
        uploadHeaders: {
          Authorization: null
        },
        appearanceImageList: [],
        form: {
          username: undefined,
          name: undefined,
          sex: 'comm_sex_man',
          password: undefined,
          description: undefined,
          departName: undefined,
          departId: undefined,
          groupType: undefined,
          email: undefined
        },
        groupTypeList: [
          {
            value: 'superAdmin',
            label: '超级管理员'
          }, {
            value: 'firstParty',
            label: '甲方'
          }, {
            value: 'projectAdmin',
            label: '项目管理员'
          }],
        disabledList: [{
          value: '1',
          label: '是'
        }, {
          value: '0',
          label: '否'
        }],
        list: null,
        total: null,
        listLoading: true,
        listQuery: {
          page: 1,
          limit: 10,
          name: '',
          username: ''
        },
        sexOptions: [],
        dialogFormVisible: false,
        dialogDepartVisible: false,
        dialogStatus: '',
        userManager_btn_edit: false,
        userManager_btn_del: false,
        userManager_btn_add: false,
        textMap: {
          update: '编辑',
          create: '创建'
        },
        tableKey: 0
      }
    },
    created() {
      this.uploadHeaders.Authorization = getToken()
      this.getQuery()
      this.getList();
      this.userManager_btn_edit = this.elements['userManager:btn_edit'];
      this.userManager_btn_del = this.elements['userManager:btn_del'];
      this.userManager_btn_add = this.elements['userManager:btn_add'];
      getTypeValue('comm_sex').then(response => {
        this.sexOptions = response.data.rows;
      });
    },
    activated() {
      this.getQuery()
    },
    computed: {
      ...mapGetters([
        'elements'
      ])
    },
    methods: {
      getQuery() {
        const searchUser = window.sessionStorage.getItem('searchUser')
        if (searchUser) {
          this.listQuery = JSON.parse(searchUser)
        }
      },
      getList() {
        this.listLoading = true;
        page(this.listQuery)
          .then(response => {
            this.list = response.data.rows;
            this.total = response.data.total;
            this.listLoading = false;
          })
      },
      handleFilter() {
        this.getList();
      },
      reset() {
        this.listQuery = {}
        this.getList()
      },
      handleSizeChange(val) {
        this.listQuery.limit = val;
        this.getList();
      },
      handleCurrentChange(val) {
        this.listQuery.page = val;
        this.getList();
      },
      resetTemp() {
        this.form = {
          username: undefined,
          name: undefined,
          sex: '男',
          password: undefined,
          description: undefined,
          departId: undefined,
          departName: undefined,
          email: undefined
        };
      }
    },
    beforeDestroy() {
      window.sessionStorage.setItem('searchUser', JSON.stringify(this.listQuery))
    }
  }
</script>
